{% extends "../base_adminlte.html" %}

{% block content %}
<div class="content-wrapper">
  <!-- Content Header (Page header) -->
    <div class="content-header">
    </div>
  <section class="content">
          <table style="border-collapse:separate; border-spacing: 0px 10px;
            margin-left: 400px;margin-top: 60px;align-content: center;">
                <tr style="height: 10px">
                    <td>角色名称</td>
                    <td><input type="text" name="rolename" id="role"   ></td>
                </tr>
               <tr>
                    <td>权限</td>
                    <td>
                    {% for g in permission %}
                       <p><input type="checkbox" name="per" id='per' value="{{ g.name }}">
                           {{ g.name }}</p>
                    {% endfor %}
                    </td>
                </tr>
                <tr>
                    <td>系统</td>
                <td>
                    {% for g in systems %}
                       <p><input type="checkbox" name="sys" id='sys' value="{{ g.systemname }}">
                           {{ g.systemname }}</p>
                    {% endfor %}
                </td>
                </tr>
                <tr>
                    <td></td>
                    <td><input type="submit" onclick="fun1()" value="提交" >
                    <button style="margin-left: 10%" onclick="location.href='/ansible/rolelist/1'" type="button" value="取消" >取消</button></td>
                </tr>
            </table>
  </section>
</div>
{% endblock %}

{% block scriptcontent %}
<script>
function fun1() {
        const systemselectedValueArr = []
        const permissionselectedValueArr = []
        const role = $('#role').val()
        const sys = document.getElementsByName("sys");
        for (let i = 0; i < sys.length; i++) {
            if (sys[i].checked) {
            systemselectedValueArr.push(sys[i].value)
        }
     }
         const systemselectedValueStr = systemselectedValueArr.join(',')
         const p = document.getElementsByName("per");
            for (let i = 0; i < p.length; i++) {
                if (p[i].checked) {
                permissionselectedValueArr.push(p[i].value)
            }
         }
            const permissionselectedValueStr = permissionselectedValueArr.join(',')
     $.ajax({
         url: '/ansible/roleadd/',
         async:false,
         data:{"system":systemselectedValueStr,"permission":permissionselectedValueStr, "rolename":role},
         type: 'GET',
         dataType: 'json',
         success: function () {
             alert("成功");
         },
     });
            window.location.href="/ansible/rolelist/1";
}
</script>
{% endblock %}
